<template>
  <nav>
    <div class="show">
      <div class="logo">
        <router-link to="/">
          <img
            src="https://www.casio.com.cn/assets/logos/casio-logo.svg"
            alt=""
          />
        </router-link>
      </div>
      <ul class="classify">
        <li
          v-for="(el, idx) in navs"
          :key="idx"
          @mouseenter="showMore(idx)"
          @mouseleave="hideMore"
        >
          {{ el.title }}
        </li>
      </ul>
      <div class="user">
        <router-link to="/cart">
          <i class="el-icon-shopping-cart-2"></i>
        </router-link>
        <div class="avatar">
          <img :src="userInfo.header_img" alt="" />
        </div>
      </div>
    </div>
    <div
      class="hide"
      :style="{ height: hideHeight }"
      @mouseenter="hideShowMore"
      @mouseleave.self="hideMore"
    >
      <banner
        class="banner"
        :imgs="bannerData"
        :bannerStyle="bannerStyle"
        :swiperOptions="swiperOptions"
      >
        <template #slide="propsdata">
          <!-- {{ propsdata.el.pic }} -->
          <div class="slide-item">
            <img :src="propsdata.el.pics[0]" alt="" />
            <span>{{ propsdata.el.name }}</span>
          </div>
        </template>
      </banner>
      <!-- <ul>
        <li>
          <img
            src="https://www.casio.com.cn/images/products/wat/11042748/ga-2100ske-7apr.png"
            alt=""
          />
          <span>5600b</span>
        </li>
      </ul> -->
    </div>
  </nav>
</template>

<script>
import banner from "../base/banner";
import dataFormat from "@/mixin/dataFormat";
import { mapState } from "vuex";
export default {
  mixins: [dataFormat],
  data() {
    return {
      activeIdx: 0, // 当前选择分页下标
      hideHeight: "0px",
      bannerStyle: {
        height: "200px",
      },
      allBannerData: [],
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 30,
        loop: true,
        observer: true,
      },
      navs: [
        {
          classify_id: 76,
          title: "G-SHOCK",
        },
        {
          classify_id: 77,
          title: "BABY-G",
        },
        {
          title: "个性定制",
        },
        {
          title: "关于CASIO",
        },
      ],
    };
  },
  async created() {
    this.navs.forEach(async (el) => {
      if (el.classify_id) {
        let allData = await this.get_classifys_data(el.classify_id);
        // 导航设计较差, 使用push无法保障如果导航顺序调转的下标问题(毕竟是模拟的)
        this.allBannerData.push(allData);
      }
    });
  },
  methods: {
    // 为了方便阅读, 分离了上下的 enter事件
    showMore(index) {
      // 两种情况进入 showMore, 根据对应navs是否含有参数classify_id下标来显示/切换二级
      if (this.navs[index].classify_id || this.navs[index].classify_id === 0) {
        this.activeIdx = index;
        this.hideHeight = "200px";
        // 切换分页内容
      } else {
        // 如果不属于商品, (关于我们/个性定制), 则隐藏
        // console.log("隐藏吧!");
        this.hideMore();
      }
    },
    hideShowMore() {
      this.hideHeight = "200px";
    },
    hideMore() {
      this.hideHeight = "0px";
      // this.hideHeight = "200px";
    },
  },
  computed: {
    ...mapState(["userInfo"]),
    bannerData() {
      // 无数据时使用 [] 空数组
      return this.allBannerData[this.activeIdx] || [];
    },
  },
  components: {
    banner,
  },
};
</script>

<style lang="scss" scoped>
nav {
  position: fixed;
  height: 60px;
  top: 0;
  width: 100%;
  min-width: 900px;
  box-shadow: 0 0 5px skyblue;
  z-index: 9;
  .show {
    height: 100%;
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    background-color: white;
    position: absolute;
    z-index: 9;
    .logo {
      height: 100%;
      width: 130px;
      @include flexCenter;
      img {
        width: 100%;
      }
    }
    .classify {
      height: 100%;
      display: flex;
      @include flexCenter;
      li {
        padding: 0 20px;
        height: 100%;
        line-height: 60px;
        cursor: pointer;
        transition: all 0.2s;
        color: #003296;
        &:hover {
          background-color: #d3f3ff;
        }
      }
    }
    .user {
      height: 100%;
      width: 130px;
      @include flexCenter;
      .el-icon-shopping-cart-2 {
        font-size: 30px;
        color: rgb(249, 90, 90);
        margin-right: 20px;
        transition: all 0.2s;
        &:hover {
          color: skyblue;
        }
      }
      .avatar {
        width: 40px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
    }
  }
  .hide {
    position: absolute;
    top: 60px;
    width: 100%;
    // height: 0;
    // overflow: hidden;
    max-height: 200px;
    transition: all 0.5s;
    // border: 5px solid skyblue;
    background-color: white;
    // 重要: 将轮播图底部定义在容器底部, 避免提前引起 mouseenter
    .banner {
      position: absolute;
      bottom: 0;
      width: 100%;
      .slide-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          // 固定宽高,避免切换图片时, 文字因为图片未加载被置顶
          width: 107px;
          height: 160px;
        }
      }
    }
  }
}
</style>